<style>

    #topCharts{
        padding: 18px;
    }

    #topCharts > div > div > svg{
        display: block;
        height: 280px;
    }

    .chartWrapper{
        border: solid 1px #c7c7c7;
        border-radius: 5px;
        padding: 5px;
        margin-bottom: 18px;
    }

    .chartLabel{
        font-size: 1.2em;
        text-align: center;
        padding: 4px;
    }

    .chartHolder{

    }

</style>

<div class="container-fluid">
	<div class="row">
    	<div class="col-md-6 chartWrapper">
        	<div class="chartLabel">Top 5 Pool Workers</div>
        	<div class="chartHolder"><canvas id="workerChart" height="100px"></canvas></div>
    	</div>

    	<div class="col-md-6 chartWrapper">
        	<div class="chartLabel">Top 5 Pool Hashrates (MH/s)</div>
            <div class="chartHolder"><canvas id="hashChart" height="100px"></canvas></div>
    	</div>
    </div>
	<div class="row">
    	<div class="col-md-12 chartWrapper">
        	<div class="chartLabel">Top 5 Blocks Pending Per Pool</div>
        	<div class="chartHolder"><canvas id="blockChart" height="200px"></canvas></div>
    	</div>
	</div>
</div>



<script>
    document.querySelector('main').appendChild(document.createElement('script')).src = '/static/stats.js';
</script>
